<template>
	<view>
		<view>
			<uni-segmented-control :current="current" :values="items" style-type="text" @clickItem="onClickItem" />

			<view v-if="current == 0">
				<uni-card style="padding-bottom: 20rpx;" v-for="item in pendingApproList" :key="item.id"
					:title="item.applyNo" :extra="item.className">
					<view style="display: flex; padding: 40rpx 20rpx;">
						<image style="width:200rpx; height: 250rpx;"
							:src="item.studentImg !=''? item.studentImg:'https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/boy.png'"
							@click="clickImg(item.studentImg)" mode=""></image>
						<view class="" style="font-size: 24rpx; margin-left: 60rpx; width: 280rpx;">
							<view>学生姓名：{{item.studentName}}</view>
							<view>未归日期：{{item.notRetrunedDate}}</view>
							<view>未归原因：{{item.reason}}</view>
							<view>当前审批人：{{item.currentApprover}}</view>
							<view>当前审批节点：{{item.currentNode}}</view>
							<view style="display: flex;">申请单状态：
								<view v-if="item.applyStatus == 0"><text>申请被驳回</text></view>
								<view v-if="item.applyStatus == 1" style="color: #fe0000;"><text>处理中</text></view>
								<view v-if="item.applyStatus == 2"><text>申请被撤回</text></view>
								<view v-if="item.applyStatus == 10"><text>审批通过</text></view>
							</view>
						</view>
					</view>
					<view style="padding: 20rpx 0;">
						<view class="button" @click="approvalHandle(item)">处 理</view>
					</view>
				</uni-card>

				<view class="" style="position: absolute; left: 10%; top: 20%;" v-if="pendingApproList.length <= 0">
					<image src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/wujilu.png" mode=""></image>
				</view>
			</view>
			<view v-if="current == 1">
				<uni-card style="padding-bottom: 20rpx;" v-for="(item,index) in approvaledList" :key="index"
					:title="item.businessData.applyNo" :extra="item.businessData.className" @click="toDetail(item)">
					<view style="display: flex; padding: 40rpx 20rpx 0 20rpx; ">
						<view class="">
							<image style="width:200rpx; height: 200rpx;" :src="item.businessData.studentImg" mode="">
							</image>
						</view>
						<view class="" style="font-size: 24rpx; margin-left: 60rpx; width: 280rpx;">
							<view style="">学生姓名：{{item.businessData.studentName}}</view>
							<view style="margin-top:15rpx;">未归日期：{{item.businessData.notRetrunedDate}}</view>
							<view style="margin-top:15rpx;" v-if="item.businessData.reason">
								未归原因：{{item.businessData.reason}}</view>
							<view style="margin-top:15rpx;" v-else>未归原因：-</view>
							<view style="display: flex; margin-top:15rpx;">申请单状态：
								<view v-if="item.businessData.applyStatus == 3"><text>班主任忘记提交请假</text></view>
								<view v-if="item.businessData.applyStatus == 1" style="color: #fe0000;"><text>处理中</text>
								</view>
								<view v-if="item.businessData.applyStatus == 2"><text>申请被撤回</text></view>
								<view v-if="item.businessData.applyStatus == 10" style="color: green;"><text>审批通过</text>
								</view>
							</view>
						</view>
					</view>

				</uni-card>

				<view class="" style="position: absolute; left: 10%; top: 20%;" v-if="approvaledList.length <= 0">
					<image src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/wujilu.png" mode=""></image>
				</view>
			</view>


			<uni-popup ref="popup" background-color="#fff" type="center">
				<scroll-view :scroll-y="true" style="height: 100vh;">
					<uni-forms ref="form" :modelValue="formData" style="padding:20rpx;" label-width="90px">
						<uni-forms-item required label="宿舍号" name="sdId">
							<uni-easyinput v-model="formData.sdId" disabled></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item required label="宿舍学生" name="studentId">
							<uni-easyinput v-model="formData.studentName" disabled></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item required label="未归寝日期" name="notRetrunedDate">
							<uni-datetime-picker type="date" :clear-icon="false" :start="Date.now()"
								v-model="formData.notRetrunedDate" />
						</uni-forms-item>
						<uni-forms-item label="学生照片" name="studentImg">
							<image style="width: 200rpx; height: 200rpx;" :src="formData.studentImg" mode="">
							</image>
						</uni-forms-item>
						<uni-forms-item label="班主任" name="teacherName">
							<uni-easyinput disabled v-model="formData.teacherName"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="班级名称" name="className">
							<uni-easyinput disabled v-model="formData.className"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item required label="未归寝原因" name="reason">
							<uni-easyinput disabled type="textarea" v-model="formData.reason"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item required label="审批状态" name="flag">
							<uni-data-checkbox v-if="currNode == 'classTeacherHandle'" style="margin-top: 12rpx;"
								v-model="formData.flag" :localdata="flagListSecond"></uni-data-checkbox>
							<uni-data-checkbox v-else style="margin-top: 12rpx;" v-model="formData.flag"
								:localdata="flagList"></uni-data-checkbox>
						</uni-forms-item>
						<uni-forms-item required label="审批意见" name="applyDesc">
							<uni-easyinput type="textarea" v-model="formData.applyDesc"></uni-easyinput>
						</uni-forms-item>

						<button type="primary" style="float: right; margin-left: 40rpx;" size="mini"
							@click="submit">提交</button>
						<button style="float: right;" size="mini" @click="cancle">取消</button>
					</uni-forms>
				</scroll-view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import taskNotReturned from "@/api/modules/taskNotReturned.js"
	import teacherClass from "@/api/modules/teachClass.js"

	export default {
		data() {
			return {
				topName: "未归寝处理",
				userName: "",
				// 分段器
				items: ['待审批列表', '已完成审批列表', ],
				current: 0,
				// 待审批列表
				pendingApproList: [],
				// 表单数据
				formData: {
					sdId: "",
					studentId: "",
					notReturnedDate: "",
					studentImg: "",
					teacherName: "",
					className: "",
					reason: "",
					flag: "",
					createBy: "",
					taskId: "",
					applyID: "",
					applyTitle: "",
					businessKey: "",
					processInstanceId: "",
				},
				currNode: "",
				dorNoList: [],
				studentList: [],
				flagList: [{
					text: "同意",
					value: 1
				}, {
					text: "驳回",
					value: 0
				}],
				flagListSecond: [{
					text: "同意",
					value: 1
				}],
				approvaledList: [],
			}
		},
		methods: {
			clickImg(img) {
				uni.previewImage({
					urls: [img], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			toDetail(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages_main/managementTeacher/itemDetailHouse/itemDetailHouse?item=${JSON.stringify(item)}`
				})
			},
			// 分段器
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			// 查询待审批列表
			getPageList() {
				taskNotReturned.getPageList({
					pageNum: 1,
					pageSize: 10,
					type: "2",
					createBy: this.userName
				}).then(res => {
					console.log(res)
					this.pendingApproList = res.data.list
				})
			},
			// 审批
			approvalHandle(item) {
				item = JSON.stringify(item)
				uni.navigateTo({
					url: `/pages_main/classTeacher/handleRecords/handleRecords?item=${item}`
				})
				// taskNotReturned.getStudentById(item.studentId).then(res => {
				// 	console.log(res)
				// 	this.$set(this.formData, "teacherName", res.data.teacherName)
				// })
				// this.$refs.popup.open()
				// this.formData.processInstanceId = item.processInstanceId
				// this.formData = item
				// teacherClass.workFlowInfo({
				// 	processInstanceId: item.processInstanceId,
				// 	createBy: this.userName
				// }).then(res => {
				// 	this.formData.applyID = res.data.applyID
				// 	this.formData.taskId = res.data.taskId
				// 	this.formData.applyTitle = res.data.applyTitle
				// 	this.formData.businessKey = res.data.businessKey
				// 	this.formData.currNode = res.data.currNode
				// 	this.currNode = res.data.currNode
				// 	console.log(this.currNode)
				// })
			},
			// 表单清空
			reset() {
				this.formData = {
					sdId: "",
					studentId: "",
					notReturnedDate: "",
					studentImg: "",
					teacherName: "",
					className: "",
					reason: "",
					flag: "",
					createBy: "",
					taskId: "",
					applyID: "",
					applyTitle: "",
					businessKey: "",
					processInstanceId: "",
				}
			},
			// 提交
			submit() {
				this.formData.createBy = this.userName
				console.log(this.formData)
				teacherClass.processWorkFlow({
					applyDesc: this.formData.applyDesc,
					applyID: this.formData.applyID,
					applyTitle: this.formData.applyTitle,
					businessKey: this.formData.businessKey,
					currNode: this.formData.currNode,
					flag: this.formData.flag,
					processInstanceId: this.formData.processInstanceId,
					taskId: this.formData.taskId,
					variables: {},
					createBy: this.userName
				}).then(res => {
					this.$refs.popup.close()
					this.getPageList()
					this.reset()
				})
			},
			// 查询已审批列表
			getApprovedList() {
				taskNotReturned.findHistoryApproval({
					createBy: this.userName,
					pageNum: 1,
					pageSize: 50,
					applyID: "notRetrunApplyNew"
				}).then(res => {
					// console.log(res)
					this.approvaledList = res.data.list
					console.log(this.approvaledList)
					this.approvaledList.forEach(item => {
						console.log(item.businessData)
						if (!item.businessData) {
							item.businessData = {
								"id": '',
								"applyNo": "",
								"studentId": "",
								"studentName": "",
								"studentImg": "",
								"classId": "",
								"className": "",
								"notRetrunedDate": "",
								"reason": "",
								"applyStatus": "",
								"createTime": "",
								"createBy": "",
								"processInstanceId": "",
								"sdId": "",
								"pageNum": 0,
								"pageSize": 0
							}
						}
					})
				})
			},
			cancle() {
				this.$refs.popup.close()
			}
		},
		onLoad() {
			this.userName = uni.getStorageSync("userName")
			this.getPageList()
			this.getApprovedList()
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.indexContent {
		height: 100vh;
	}

	/deep/.uni-popup .uni-popup__wrapper[data-v-7c43d41b] {
		width: 80%;
		/* padding: 40rpx 20rpx 40rpx 40rpx; */
	}

	.button {
		width: 50%;
		background-color: #22ad38;
		color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		text-align: center;
		font-size: 36rpx;
		margin: 0 auto;
	}
</style>